<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="static/css/minireset.css" />
    <link rel="stylesheet" href="static/css/common.css" />
    <link rel="stylesheet" href="static/css/cart.css" />
    <script src="static/script/vue.js"></script>
    <script src="static/script/axios.min.js"></script>

  </head>
  <body>
    <div id="app">
      <div class="header">
        <div class="w">
          <div class="header-left">
            <a href="index.html">
              <img src="static/img/logo.gif" alt=""
            /></a>
            <h1>我的购物车</h1>
          </div>
  <!--        <div class="header-right">-->
  <!--          <h3>欢迎<span>张总</span>光临尚硅谷书城</h3>-->
  <!--          <div class="order"><a href="order/order.html">我的订单</a></div>-->
  <!--          <div class="destory"><a href="index.html">注销</a></div>-->
  <!--          <div class="gohome">-->
  <!--            <a href="index.html">返回</a>-->
  <!--          </div>-->
  <!--        </div>-->
          <div th:replace="manager/manager :: top_user"></div>
        </div>
      </div>
      <div class="list">
        <div class="w">
          <table>
            <thead>
              <tr>
                <th>图片</th>
                <th>商品名称</th>

                <th>数量</th>
                <th>单价</th>
                <th>金额</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-if="items.length===0">
                <td colspan="6">
                  <h1 style="font-size: 30px;color: red">购物车为空,请添加商品</h1>
                </td>
              </tr>
              <tr v-for="item in items">
                <td>
                  <img v-bind:src="item.imgPath" alt="" />
                </td>
                <td v-text="item.bookTitle">活着</td>
                <td>
                  <span class="count" @click="subNum(item)">-</span>
                  <input class="count-num" type="text" v-model="item.count" @change="updateItem(item)"/>
                  <span class="count" @click="addNum(item)">+</span>
                </td>
                <td v-text="item.price">36.8</td>
                <td v-text="item.amount">36.8</td>
                <td><a href="" @click.prevent="deleteItem(item)">删除</a></td>
              </tr>

            </tbody>
          </table>
          <div class="footer">
            <div class="footer-left">
              <a href="#" class="clear-cart" @click.prevent="clearCart">清空购物车</a>
              <a href="#">继续购物</a>
            </div>
            <div class="footer-right">
              <div>共<span v-text="count">3</span>件商品</div>
              <div class="total-price">总金额<span v-text="amount">99.9</span>元</div>
              <a class="pay" href="order?method=addOrder" @click="addOrder">去结账</a>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div class="w">
          <div class="top">
            <ul>
              <li>
                <a href="">
                  <img src="static/img/bottom1.png" alt="" />
                  <span>大咖级讲师亲自授课</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom.png" alt="" />
                  <span>课程为学员成长持续赋能</span>
                </a>
              </li>
              <li>
                <a href="">
                  <img src="static/img/bottom2.png" alt="" />
                  <span>学员真是情况大公开</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="content">
            <dl>
              <dt>关于尚硅谷</dt>
              <dd>教育理念</dd>
              <!-- <dd>名师团队</dd>
              <dd>学员心声</dd> -->
            </dl>
            <dl>
              <dt>资源下载</dt>
              <dd>视频下载</dd>
              <!-- <dd>资料下载</dd>
              <dd>工具下载</dd> -->
            </dl>
            <dl>
              <dt>加入我们</dt>
              <dd>招聘岗位</dd>
              <!-- <dd>岗位介绍</dd>
              <dd>招贤纳师</dd> -->
            </dl>
            <dl>
              <dt>联系我们</dt>
              <dd>http://www.com.atguigu.com</dd>
              <dd></dd>
            </dl>
          </div>
        </div>
        <div class="down">
          尚硅谷书城.Copyright ©2015
        </div>
      </div>
    </div>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        items: [],
        count: 0,
        amount: 0,
      },
      methods: {
        async getItem(){
          let {data: result} = await axios.get("cart?method=getItems")
          if (result.flag){
            this.items=result.data.list
            this.count=result.data.count
            this.amount=result.data.totalAmount
          } else{
            this.items = []
            this.count = 0
            this.amount = 0
          }
        },
        async deleteItem(item){

          if(!confirm("是否删除")){
            return
          }

          let {data: result} = await axios.get("cart?method=deleteItem&id=" + item.id)
          if (result.flag){
            alert("移除成功")
            this.getItem()
          }
        },
        async clearCart(){
          if(!confirm("是否清空")){
            return
          }

          let {data: result} = await axios.get("cart?method=clearCart")
          if (result.flag){
            this.getItem()
          }
        },
        addNum(item){
          item.count++
          this.updateItem(item)
        },
        subNum(item){
          if (item.count > 1){
            item.count--
            this.updateItem(item)
          }else {
              this.deleteItem(item)
          }
        },
        async updateItem(item){
          let {data: result} = await axios.get(`cart?method=updateItem&id=${item.id}&count=${item.count}`)
          if (result.flag){
            this.getItem()
          }
        },
        addOrder(){
          if (this.count===0){
            alert("购物车为空")
            event.preventDefault()
          }
        }
      },

      created(){
        this.getItem()
      }
    })
  </script>
  </body>
</html>
